<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>画廊</title>
</head>
<body>

<canvas id="canvas" width="600" height="300"></canvas>
<script>
    function draw() {
        var ctx = canvas.getContext("2d");
        var img = new Image();
        img.src = "https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg";
        // img.src = "http://b90.photo.store.qq.com/psb?/V10ln02714cr3F/dBt02VQnXawWEYRJizwoyklw0kLVf5XEPYnVWbysa2w!/b/dFoAAAAAAAAA&bo=bgNKAQAAAAAAAAA!&rf=viewer_311";

        var x = 0, y = 0;
        img.onload = function (e) {
            setInterval(onDraw, 20);
        }


        function onDraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            //图片小于画布,处理方式可以是缩放,重复绘制.
            if (img.width > canvas.width) {
                //由于图片比画布大，不会出现右边空白的情况。
                if (x+img.width>canvas.width && x>0){//此时左边出现空白。图片首尾拼接，填充掉
                    ctx.drawImage(img, -img.width+x,y, img.width,img.height);
                }
            }

            ctx.drawImage(img, x, 0, img.width, img.height);
            x += 1;
            if (x > canvas.width) {
                x = canvas.width-img.width;
            }

        }
    }

    draw();

</script>
</body>
</html>